<template>
	<div class="setting-base">
		<div class="setting-title">
			<p>店铺推荐</p>
			<div></div>
		</div>
		<div class="setting-form">
			<el-form :model="form">
				<h4>添加店铺</h4>
				<p>最多添加 {{ limitNum }} 个店铺</p>
				<div class="nav-item" v-for="(item, index) in form.shopList" :key="index">
					<div class="left-nav" v-if="form.type != '2'">
						<div class="choose-nav">
							<div @click="chooseNav(index)" v-if="!item.logoUrl">
								<el-icon :size="20">
									<ele-Plus />
								</el-icon>
							</div>
							<img v-if="item.logoUrl" style="width: 100%; height: 100%" :src="item.logoUrl" />
						</div>
					</div>
					<div class="right-nav">
						<el-form-item label="店铺">
							<select-shop ref="selectShopRef" v-model="item.shopId" @shopChange="shopChange(index, $event)"></select-shop>
						</el-form-item>
					</div>
					<div>
						<el-icon v-if="form.shopList.length > 1" :size="20" style="cursor: pointer" @click="del(index)">
							<ele-Delete />
						</el-icon>
					</div>
				</div>
				<div class="add-btn">
					<el-button @click="add" v-if="form.shopList && form.shopList.length < limitNum">
						<el-icon :size="20"> <ele-Plus /> </el-icon>添加店铺（{{ form.shopList.length }}/{{ limitNum }}）</el-button
					>
				</div>
				<div>
					<el-form-item label="文字颜色">
						<el-color-picker v-model="form.fontColor" />
					</el-form-item>
					<el-form-item label="背景颜色">
						<el-color-picker v-model="form.bgColor" />
					</el-form-item>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script lang="ts">
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
import { reactive, defineComponent, defineAsyncComponent, toRefs, watch, ref, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
	components: { SelectShop: defineAsyncComponent(() => import('/@/components/selectShop/index.vue')) },
	props: {
		formData: {
			type: Object,
			defult: {},
		},
	},
	setup(props) {
		// do not use same name with ref
		// 定义变量内容
		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);
		const dragOptions = ref({
			nimation: 200,
			group: 'description',
			disabled: false,
			ghostClass: 'ghost',
		});
		const imgDialogRef = ref();
		const chooseNavIndex = ref();
		const limitNum = ref(10);
		const state = reactive({
			form: {
				fontColor: '#333',
				bgColor: '#fff',
				shopList: [{ logoUrl: undefined, name: '', id: undefined }],
			},
		});
		const chooseNav = (index: number) => {
			chooseNavIndex.value = index;
			imgDialogRef.value.dialog = true;
		};
		const add = () => {
			if (state.form.shopList.length < limitNum.value) {
				state.form.shopList.push({
					logoUrl: undefined,
					name: '',
					id: undefined,
				});
			}
		};
		const del = (index: number) => {
			ElMessageBox.confirm('确定删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				state.form.shopList.splice(index, 1);
			});
		};
		// 页面加载时
		onMounted(() => {
			if (JSON.stringify(props.formData) == '{}') {
				state.form = {
					fontColor: '#333',
					bgColor: '#fff',
					shopList: [{ logoUrl: undefined, name: '', id: undefined }],
				};
			} else {
				state.form = props.formData;
			}
			if (diyPageData.value.selectedIndex != undefined) {
				diyPageData.value.componentsList[diyPageData.value.selectedIndex].data = state.form;
			}
		});
		watch(
			() => props.formData,
			(newValue, oldValue) => {
				state.form = newValue ? newValue : state.form;
				// 注意：`newValue` 此处和 `oldValue` 是相等的
				// *除非* state.someObject 被整个替换了
			},
			{ deep: true, immediate: true }
		);
		const shopChange = (index: number, shop: any) => {
			state.form.shopList[index].logoUrl = shop.logoUrl;
			state.form.shopList[index].id = shop.id;
			state.form.shopList[index].name = shop.name;
		};
		return {
			limitNum,
			imgDialogRef,
			dragOptions,
			chooseNavIndex,
			add,
			del,
			chooseNav,
			shopChange,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
@import './common.scss';

.nav-item {
	display: flex;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin: 10px;
	padding: 10px;

	.left-nav {
		width: 60px;
		height: 60px;
		border-radius: 2px;
		border: 1px solid #eee;
		background: #f2f4f6;

		.choose-nav {
			position: relative;
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;

			.modify-nav {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}
		}

		&:hover {
			cursor: pointer;
		}
	}

	.right-nav {
		padding-left: 10px;
	}
}

.add-btn {
	padding: 10px 0px 20px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
